<!-- 我的下属 -->
<template>
  <div id="user-profile-subordinate" class="app-container">
    <div style="overflow: auto; overflow-x: hidden;">
      <el-row v-if="subordinates.length>0" :gutter="20">
        <el-col v-for="item in subordinates" :key="item.id" :xs="8" :sm="6" :md="6" :lg="6" :xl="4" class="m-b-10">
          <el-card class="box-card">
            <img :src="global.getFileView(item.avatar)" :title="item.realName" @error="handleImageError">
            <div class="text">
              <p>{{ item.realName }}/{{ item.userCode }}</p>
              <p>{{ item.mobile }}</p></div>
          </el-card>
        </el-col>
      </el-row>
      <el-empty v-else description="暂无下属员工" />

    </div>
  </div>
</template>

<script>
export default {
  components: {
  },
  data() {
    return {
      subordinates: []
    }
  },
  computed: {

  },
  watch: {
  },
  created() {
    this.fetchData()
  },
  methods: {
    async fetchData() {
      var res = await this.$store.dispatch('getCurrentUserSubordinate')
      this.subordinates = res
    }

  }
}
</script>
<style lang="scss">
  #user-profile-subordinate{
    .el-card__body {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      padding: 10px 20px;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
    }
    .el-card__body img {
      margin-right: 14px;
      width: 48px;
      height: 48px;
      border-radius: 24px;
    }
    .el-card__body .text {
      font-size: 12px;
    }
  }
</style>
